<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页 - TodoList</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="miniprogram-container">
        <div class="page">
            <!-- 头部区域 -->
            <header class="header">
                <div class="flex flex-between">
                    <div>
                        <h1 class="header-title">⚡ 我的任务</h1>
                        <p class="header-subtitle">TASK MANAGEMENT</p>
                    </div>
                    <div class="flex" style="gap: 12px;">
                        <button class="btn btn-secondary" onclick="toggleSearch()">
                            <i class="fas fa-search"></i>
                        </button>
                        <button class="btn btn-secondary" onclick="toggleFilter()">
                            <i class="fas fa-filter"></i>
                        </button>
                    </div>
                </div>
            </header>

            <!-- 搜索栏 -->
            <div id="searchBar" class="search-bar hidden animate-slide-down">
                <div class="search-input-wrapper">
                    <input type="text" class="search-input" placeholder="🔍 搜索任务..." id="searchInput">
                </div>
                <button class="btn btn-secondary" onclick="clearSearch()">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <!-- 筛选栏 -->
            <div id="filterBar" class="search-bar hidden animate-slide-down" style="background: var(--bg-tertiary);">
                <div class="flex" style="gap: 8px; flex: 1;">
                    <button class="btn btn-primary filter-btn active" data-filter="all">全部</button>
                    <button class="btn btn-secondary filter-btn" data-filter="high">高优先级</button>
                    <button class="btn btn-secondary filter-btn" data-filter="medium">中优先级</button>
                    <button class="btn btn-secondary filter-btn" data-filter="low">低优先级</button>
                </div>
            </div>

            <!-- 工具栏 -->
            <div class="search-bar" style="background: var(--bg-secondary);">
                <div class="flex flex-between" style="width: 100%;">
                    <div class="flex" style="gap: 12px;">
                        <button class="btn btn-secondary" onclick="toggleSort()">
                            <i class="fas fa-sort"></i>
                            <span style="margin-left: 8px;">排序</span>
                        </button>
                        <select class="btn btn-secondary" style="border: none; background: var(--bg-primary);" onchange="sortTasks(this.value)">
                            <option value="createTime">创建时间</option>
                            <option value="priority">优先级</option>
                            <option value="title">标题</option>
                        </select>
                    </div>
                    <div class="flex" style="gap: 12px;">
                        <button class="btn btn-secondary" onclick="toggleBatchMode()">
                            <i class="fas fa-check-square"></i>
                            <span style="margin-left: 8px;">批量</span>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 任务列表 -->
            <div class="flex-1" style="overflow-y: auto; padding-bottom: 100px;">
                <!-- 任务统计 -->
                <div class="card" style="margin: 16px; padding: 16px;">
                    <div class="flex flex-between" style="margin-bottom: 12px;">
                        <h3 style="margin: 0; font-size: 16px; text-transform: uppercase; letter-spacing: 0.5px;">📊 QUICK STATS</h3>
                        <span class="priority-badge priority-low" style="font-size: 10px;">LIVE</span>
                    </div>
                    <div class="flex" style="gap: 16px;">
                        <div class="text-center">
                            <div style="font-size: 20px; font-weight: bold; color: var(--accent-blue); text-shadow: 0 0 10px var(--accent-blue-glow);">24</div>
                            <div style="font-size: 10px; color: var(--text-secondary); text-transform: uppercase;">TOTAL</div>
                        </div>
                        <div class="text-center">
                            <div style="font-size: 20px; font-weight: bold; color: var(--accent-green); text-shadow: 0 0 10px var(--accent-green-glow);">18</div>
                            <div style="font-size: 10px; color: var(--text-secondary); text-transform: uppercase;">DONE</div>
                        </div>
                        <div class="text-center">
                            <div style="font-size: 20px; font-weight: bold; color: var(--accent-orange); text-shadow: 0 0 10px var(--accent-orange-glow);">6</div>
                            <div style="font-size: 10px; color: var(--text-secondary); text-transform: uppercase;">PENDING</div>
                        </div>
                    </div>
                </div>

                <!-- 任务卡片列表 -->
                <div id="taskList">
                    <!-- 高优先级任务 -->
                    <div class="task-card priority-high animate-slide-up" onclick="openTaskDetail('1')">
                        <div class="flex flex-between" style="margin-bottom: 12px;">
                            <div class="task-title">🔥 完成项目报告</div>
                            <div class="priority-badge priority-high">HIGH</div>
                        </div>
                        <div class="task-note">需要整理数据和制作图表展示，包含用户反馈分析和性能优化建议，预计需要3-4小时完成</div>
                        <div class="task-meta">
                            <span><i class="fas fa-clock" style="margin-right: 4px;"></i>2小时前</span>
                            <div class="flex" style="gap: 8px;">
                                <button class="btn btn-success" style="padding: 4px 8px; font-size: 10px;" onclick="event.stopPropagation(); toggleTaskStatus('1')">
                                    <i class="fas fa-check"></i>
                                </button>
                                <button class="btn btn-secondary" style="padding: 4px 8px; font-size: 10px;" onclick="event.stopPropagation(); editTask('1')">
                                    <i class="fas fa-edit"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 中优先级任务 -->
                    <div class="task-card priority-medium animate-slide-up" onclick="openTaskDetail('2')" style="animation-delay: 0.1s;">
                        <div class="flex flex-between" style="margin-bottom: 12px;">
                            <div class="task-title">📚 学习新技能</div>
                            <div class="priority-badge priority-medium">MEDIUM</div>
                        </div>
                        <div class="task-note">完成在线课程第3章内容，包含实践练习和课后作业</div>
                        <div class="task-meta">
                            <span><i class="fas fa-clock" style="margin-right: 4px;"></i>3天前</span>
                            <div class="flex" style="gap: 8px;">
                                <button class="btn btn-success" style="padding: 4px 8px; font-size: 10px;" onclick="event.stopPropagation(); toggleTaskStatus('2')">
                                    <i class="fas fa-check"></i>
                                </button>
                                <button class="btn btn-secondary" style="padding: 4px 8px; font-size: 10px;" onclick="event.stopPropagation(); editTask('2')">
                                    <i class="fas fa-edit"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 低优先级任务 -->
                    <div class="task-card priority-low animate-slide-up" onclick="openTaskDetail('3')" style="animation-delay: 0.2s;">
                        <div class="flex flex-between" style="margin-bottom: 12px;">
                            <div class="task-title">🛒 购买生活用品</div>
                            <div class="priority-badge priority-low">LOW</div>
                        </div>
                        <div class="task-note">牙膏、洗发水、纸巾等日用品，顺便买点零食</div>
                        <div class="task-meta">
                            <span><i class="fas fa-clock" style="margin-right: 4px;"></i>昨天</span>
                            <div class="flex" style="gap: 8px;">
                                <button class="btn btn-success" style="padding: 4px 8px; font-size: 10px;" onclick="event.stopPropagation(); toggleTaskStatus('3')">
                                    <i class="fas fa-check"></i>
                                </button>
                                <button class="btn btn-secondary" style="padding: 4px 8px; font-size: 10px;" onclick="event.stopPropagation(); editTask('3')">
                                    <i class="fas fa-edit"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 更多任务 -->
                    <div class="task-card priority-high animate-slide-up" onclick="openTaskDetail('4')" style="animation-delay: 0.3s;">
                        <div class="flex flex-between" style="margin-bottom: 12px;">
                            <div class="task-title">💼 客户会议准备</div>
                            <div class="priority-badge priority-high">HIGH</div>
                        </div>
                        <div class="task-note">准备演示文稿和产品demo，整理客户需求文档</div>
                        <div class="task-meta">
                            <span><i class="fas fa-clock" style="margin-right: 4px;"></i>5小时前</span>
                            <div class="flex" style="gap: 8px;">
                                <button class="btn btn-success" style="padding: 4px 8px; font-size: 10px;" onclick="event.stopPropagation(); toggleTaskStatus('4')">
                                    <i class="fas fa-check"></i>
                                </button>
                                <button class="btn btn-secondary" style="padding: 4px 8px; font-size: 10px;" onclick="event.stopPropagation(); editTask('4')">
                                    <i class="fas fa-edit"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="task-card priority-medium animate-slide-up" onclick="openTaskDetail('5')" style="animation-delay: 0.4s;">
                        <div class="flex flex-between" style="margin-bottom: 12px;">
                            <div class="task-title">🏃‍♂️ 健身计划</div>
                            <div class="priority-badge priority-medium">MEDIUM</div>
                        </div>
                        <div class="task-note">每周三次有氧运动，每次30分钟以上</div>
                        <div class="task-meta">
                            <span><i class="fas fa-clock" style="margin-right: 4px;"></i>1周前</span>
                            <div class="flex" style="gap: 8px;">
                                <button class="btn btn-success" style="padding: 4px 8px; font-size: 10px;" onclick="event.stopPropagation(); toggleTaskStatus('5')">
                                    <i class="fas fa-check"></i>
                                </button>
                                <button class="btn btn-secondary" style="padding: 4px 8px; font-size: 10px;" onclick="event.stopPropagation(); editTask('5')">
                                    <i class="fas fa-edit"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 空状态提示 -->
                    <div id="emptyState" class="hidden text-center" style="padding: 60px 20px;">
                        <div style="font-size: 48px; margin-bottom: 16px; opacity: 0.5;">📝</div>
                        <div style="font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--text-secondary);">暂无任务</div>
                        <div style="font-size: 14px; color: var(--text-tertiary);">点击右下角按钮创建你的第一个任务</div>
                    </div>
                </div>
            </div>

            <!-- 浮动创建按钮 -->
            <button class="fab animate-glow" onclick="createNewTask()">
                <i class="fas fa-plus"></i>
            </button>

            <!-- 底部导航 -->
            <nav class="bottom-nav">
                <a href="#" class="nav-item active">
                    <div class="nav-icon"><i class="fas fa-home"></i></div>
                    <div class="nav-label">主页</div>
                </a>
                <a href="#" class="nav-item">
                    <div class="nav-icon"><i class="fas fa-user"></i></div>
                    <div class="nav-label">我的</div>
                </a>
            </nav>
        </div>
    </div>

    <script>
        // 搜索功能
        function toggleSearch() {
            const searchBar = document.getElementById('searchBar');
            const filterBar = document.getElementById('filterBar');
            
            if (searchBar.classList.contains('hidden')) {
                searchBar.classList.remove('hidden');
                filterBar.classList.add('hidden');
                document.getElementById('searchInput').focus();
            } else {
                searchBar.classList.add('hidden');
            }
        }

        // 筛选功能
        function toggleFilter() {
            const filterBar = document.getElementById('filterBar');
            const searchBar = document.getElementById('searchBar');
            
            if (filterBar.classList.contains('hidden')) {
                filterBar.classList.remove('hidden');
                searchBar.classList.add('hidden');
            } else {
                filterBar.classList.add('hidden');
            }
        }

        // 清除搜索
        function clearSearch() {
            document.getElementById('searchInput').value = '';
            document.getElementById('searchBar').classList.add('hidden');
            // 重新显示所有任务
            filterTasks('all');
        }

        // 筛选任务
        function filterTasks(priority) {
            const tasks = document.querySelectorAll('.task-card');
            const filterBtns = document.querySelectorAll('.filter-btn');
            
            // 更新按钮状态
            filterBtns.forEach(btn => {
                btn.classList.remove('btn-primary', 'active');
                btn.classList.add('btn-secondary');
            });
            
            const activeBtn = document.querySelector(`[data-filter="${priority}"]`);
            activeBtn.classList.remove('btn-secondary');
            activeBtn.classList.add('btn-primary', 'active');
            
            // 筛选任务
            tasks.forEach(task => {
                if (priority === 'all' || task.classList.contains(`priority-${priority}`)) {
                    task.style.display = 'block';
                } else {
                    task.style.display = 'none';
                }
            });
        }

        // 排序任务
        function sortTasks(sortBy) {
            console.log('排序方式:', sortBy);
            // 这里可以实现排序逻辑
        }

        // 批量模式
        function toggleBatchMode() {
            console.log('切换批量模式');
            // 这里可以实现批量选择逻辑
        }

        // 任务操作
        function openTaskDetail(taskId) {
            console.log('打开任务详情:', taskId);
            // 这里可以跳转到任务详情页
        }

        function toggleTaskStatus(taskId) {
            console.log('切换任务状态:', taskId);
            // 这里可以实现任务状态切换
        }

        function editTask(taskId) {
            console.log('编辑任务:', taskId);
            // 这里可以跳转到编辑页面
        }

        function createNewTask() {
            console.log('创建新任务');
            // 这里可以跳转到创建页面
        }

        // 筛选按钮事件
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                filterTasks(btn.dataset.filter);
            });
        });

        // 搜索输入事件
        document.getElementById('searchInput').addEventListener('input', function(e) {
            const keyword = e.target.value.toLowerCase();
            const tasks = document.querySelectorAll('.task-card');
            
            tasks.forEach(task => {
                const title = task.querySelector('.task-title').textContent.toLowerCase();
                const note = task.querySelector('.task-note').textContent.toLowerCase();
                
                if (title.includes(keyword) || note.includes(keyword)) {
                    task.style.display = 'block';
                } else {
                    task.style.display = 'none';
                }
            });
        });

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 添加一些交互效果
            const taskCards = document.querySelectorAll('.task-card');
            taskCards.forEach((card, index) => {
                card.style.animationDelay = `${index * 0.1}s`;
            });
        });
    </script>
</body>
</html> 